<script setup lang="ts">
import { ElDialog } from 'element-plus'
import { propTypes } from '@/utils/propTypes'

defineProps({
  title: propTypes.string.def('')
})

const emit = defineEmits(["handleSuccess", "handleCancel"])
const handleSuccess = () => {
  emit('handleSuccess');
}
const handleCancel = () => {
  emit('handleCancel');
}
</script>

<template>
  <el-dialog
    align-center
    draggable
    :destroy-on-close="true"
    v-bind="$attrs"
    class="comp-f-dialog"
  >
    <template #header>
      <div class="comp-f-dialog__header">
        <slot name="header">
          <div class="dialog-header">
            {{ title }}
          </div>
        </slot>
      </div>
      <el-divider style="margin:0px"/>
    </template>
    <template #footer>
      <el-divider style="margin: 0"/>
      <div class="comp-f-dialog__footer">
        <slot name="footer">
          <div class="dialog-footer">
              <el-button type="primary" @click="handleSuccess">
                确定
              </el-button>
              <el-button @click="handleCancel">
                取消
              </el-button>
          </div>
        </slot>
      </div>
    </template>
    <slot />
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  text-align: center;
}
</style>
